<template>
  <div class="app-container home">
    <el-row class="top_card">
      <el-col :span="4" class="top_col">
        <div>材料库</div>
        <div>{{ meterialTotalCount }}</div>
      </el-col>
      <el-col :span="4" class="top_col">
        <div>模型库</div>
        <div>{{ modelTotal }}</div>
      </el-col>
      <el-col :span="4" class="top_col">
        <div>紧固件库</div>
        <div>{{ fastenerTotal }}</div>
      </el-col>
      <el-col :span="4" class="top_col">
        <div>算法库</div>
        <div>{{ algorithmTotal }}</div>
      </el-col>
      <el-col :span="4" class="top_col">
        <div>结果库</div>
        <div>{{ resultTotal }}</div>
      </el-col>
    </el-row>
    <el-row class="row_class" style="min-height: 400px">
      <div class="material">
        <div class="card_title">算法库</div>
        <div class="card_body">
          <el-row :gutter="24" class="row">
            <el-col :span="15" class="col">
              <div class="title">算法</div>
              <div ref="algorithmLibraryBar" style="width: 100%; height: 100%"></div>
            </el-col>
            <el-col :span="8" class="col">
              <div class="title">算子</div>
              <CirclePacking :operatorPackData="operatorData" v-if="operatorData.length > 0" />
            </el-col>
          </el-row>
        </div>
      </div>
    </el-row>
    <el-row class="row_class">
      <div class="material">
        <div class="card_title">材料库</div>
        <div class="card_body">
          <el-row :gutter="24" class="row">
            <el-col :span="11" class="col">
              <div class="title">材料分类</div>
              <div ref="pieChartContainer2" style="width: 100%; height: 100%"></div>
            </el-col>
            <el-col :span="11" class="col">
              <div class="title">金属材料</div>
              <div ref="pieChartContainer1" style="width: 100%; height: 100%"></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-row>
    <div style="display: flex; justify-content: space-between">
      <el-row class="row_class" style="width: 49%">
        <div class="modal">
          <div class="card_title">模型库</div>
          <div class="card_body">
            <el-row :gutter="24" class="row">
              <el-col :span="23" class="col">
                <!-- <div class="title">模型库</div> -->
                <div ref="categoryChartContainer" style="width: 100%; height: 100%"></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-row>
      <el-row class="row_class" style="width: 49%">
        <div class="modal">
          <div class="card_title">紧固件库</div>
          <div class="card_body">
            <el-row :gutter="24" class="row">
              <el-col :span="23" class="col">
                <!-- <div class="title">紧固件库</div> -->
                <div ref="pieChartContainer3" style="width: 100%; height: 100%"></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-row>
    </div>
    <div style="display: flex; justify-content: space-between">
      <el-row class="row_class" style="width: 49%">
        <div class="modal">
          <div class="card_title">结果库</div>
          <div class="card_body">
            <el-row :gutter="24" class="row">
              <el-col :span="23" class="col">
                <div ref="categoryChartContainer1" style="width: 100%; height: 100%"></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script setup name="Oss" lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import CirclePacking from '@/components/isfd-web/circlePacking/CirclePacking.vue';
import { getMaterialCountData, getModalCountData, getFastenerData, getAlgorithmData, getOperatorData, getResultData } from '@/api/assetManagement';
const pieChartContainer1 = ref(null);
const pieChartContainer2 = ref(null);
const pieChartContainer3 = ref(null);
const categoryChartContainer = ref(null);
const categoryChartContainer1 = ref(null);
const algorithmLibraryBar = ref(null);

let categoryChart = null;
let categoryChart1 = null;
let pieChart1 = null;
let pieChart2 = null;
let pieChart3 = null;
let algorithmLibrary = null;
const meterialTotalCount = ref(0);
const modelTotal = ref(0);
const fastenerTotal = ref(0);
const algorithmTotal = ref(0);
//金属材料数据
const metarialData = ref([]);
//复合材料数据
const compmetarialData = ref([]);
//模型数据
const modalData = ref([]);
const modalLegned = ref([]);
const metarialTotal = ref(0);
const compmetarialTotal = ref(0);
//紧固件数据
const fastenerData = ref([]);
// 算法库数据
const algorithmData = ref([]);
const operatorData = ref([]);
// 结果库数据
const resultData = ref([]);
const resultLegend = ref([]);
const resultTotal = ref(0);
// 算法柱状图
const algorithBarInit = () => {
  algorithmLibrary = echarts.init(algorithmLibraryBar.value);
  algorithmLibrary.setOption({
    legend: {},
    tooltip: {},
    dataset: {
      source: algorithmData.value
    },
    xAxis: [{ type: 'category', gridIndex: 0 }],
    yAxis: [{ gridIndex: 0 }],
    series: [
      { type: 'bar', seriesLayoutBy: 'row', itemStyle: { normal: { label: { show: true } } } },
      { type: 'bar', seriesLayoutBy: 'row', itemStyle: { normal: { label: { show: true } } } },
      { type: 'bar', seriesLayoutBy: 'row', itemStyle: { normal: { label: { show: true } } } }
    ]
  });
};
//饼图init
const initPieChart = () => {
  pieChart1 = echarts.init(pieChartContainer1.value);
  pieChart2 = echarts.init(pieChartContainer2.value);
  pieChart3 = echarts.init(pieChartContainer3.value);
  pieChart1.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      icon: 'circle',
      right: 0,
      top: 'center',
      orient: 'vertical'
    },

    series: [
      {
        name: '金属材料',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter: '{b}:{c}'
          // position: 'center'
        },
        labelLine: {
          show: true
        },
        data: metarialData.value
      }
    ]
  });
  pieChart2.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      icon: 'circle',
      right: '10%',
      top: 'center',
      orient: 'vertical'
    },

    series: [
      {
        name: '材料分类',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter: '{b}:{c}',
          position: 'outside'
        },
        labelLine: {
          show: true
        },

        data: [
          { name: '金属材料', value: metarialTotal.value },
          { name: '复合材料', value: compmetarialTotal.value }
        ]
      }
    ]
  });
  pieChart3.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      icon: 'circle',
      right: 0,
      top: 'center',
      orient: 'vertical'
    },

    series: [
      {
        name: '金属材料',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter: '{b}:{c}'
          // position: 'center'
        },
        labelLine: {
          show: true
        },
        data: fastenerData.value
      }
    ]
  });
};
//柱状图init
const initCategory = () => {
  categoryChart = echarts.init(categoryChartContainer.value);
  categoryChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    color: ['#4ddadc'],
    legend: {
      show: true
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: modalLegned.value
    },
    series: [
      {
        data: modalData.value,
        type: 'bar',
        name: '模型个数',
        itemStyle: { normal: { label: { show: true } } }
      }
    ]
  });
};
const initResultCategory = () => {
  categoryChart1 = echarts.init(categoryChartContainer1.value);
  categoryChart1.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    color: ['#4ddadc'],
    legend: {
      show: true
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: resultLegend.value
    },
    series: [
      {
        data: resultData.value,
        type: 'bar',
        name: 'OP2文件',
        itemStyle: { normal: { label: { show: true } } }
      }
    ]
  });
};
const handleResize = () => {
  pieChart1?.resize();
  pieChart2?.resize();
  pieChart3?.resize();
  categoryChart?.resize();
  algorithmLibrary?.resize();
};

onMounted(() => {
  getMaterialCountData().then((res) => {
    metarialData.value = res?.data.map((el) => {
      if (el.materialType !== 'comp_material') {
        metarialTotal.value += el.count;
        return { value: el.count, name: el.materialName };
      }
    });
    compmetarialData.value = res?.data.map((el) => {
      if (el.materialType === 'comp_material') {
        compmetarialTotal.value += el.count;
        return { value: el.count, name: el.materialName };
      }
    });
    meterialTotalCount.value = metarialTotal.value + compmetarialTotal.value;
    initPieChart();
  });
  getModalCountData().then((res) => {
    modalData.value = res?.data.map((el) => {
      modelTotal.value += el.totalCount;
      return el.totalCount;
    });
    modalLegned.value = res?.data.map((el) => el.fileType);
    initCategory();
  });
  getFastenerData().then((res) => {
    fastenerData.value = res?.data.map((el) => {
      fastenerTotal.value += el.count;
      return { value: el.count, name: el.type };
    });
    initPieChart();
  });
  getAlgorithmData().then((res) => {
    const result = res?.data || [];
    let xAxisArr = ['type'];
    let type1 = ['机身'];
    let type2 = ['通用'];
    let type3 = ['尾翼'];
    result.map((el) => {
      algorithmTotal.value += el.count;
      xAxisArr.push(el.name);
      if (el.children) {
        el.children.map((item) => {
          if (item.type === 'fuselage') {
            type1.push(item.count);
          }
          if (item.type === 'generalization') {
            type2.push(item.count);
          }
          if (item.type === 'empennage') {
            type3.push(item.count);
          }
        });
      }
    });
    algorithmData.value.push(xAxisArr);
    algorithmData.value.push(type1);
    algorithmData.value.push(type2);
    algorithmData.value.push(type3);
    algorithBarInit();
  });
  getOperatorData().then((res) => {
    if (res?.data) {
      operatorData.value = res.data;
    }
  });
  getResultData().then((res) => {
    if (res?.data) {
      res?.data.map((el) => {
        resultLegend.value.push(el.fileType);
        resultData.value.push(el.totalCount);
        resultTotal.value += el.totalCount;
      });
    }
    initResultCategory();
  });
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 84px);
  background: #f4f5f7;
  .top_card {
    height: 100px;
    background: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
    .top_col {
      height: 100%;
      background: #f4f5f7;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      > div:nth-child(1) {
        font-size: 18px;
        border-bottom: 1px solid #b3b3b3;
        padding-bottom: 5px;
      }
      > div:nth-child(2) {
        font-size: 16px;
        padding-top: 5px;
      }
    }
  }
  .row_class {
    height: 50%;
    width: 100%;
    min-height: 300px;
    margin-top: 12px;
    .modal {
      width: 100%;
      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
      .row {
        height: 100%;
        display: flex;
        align-items: stretch;

        .col {
          margin: 10px;
          background: #fff;
          display: flex;
          flex-direction: column;
          .title {
            padding: 15px 0 0 15px;
            height: 40px;
            font-size: 18px;
          }
        }
      }
    }
    .modal,
    .material {
      width: 100%;
      background: #fff;
      padding: 12px;
      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
      .row {
        height: 100%;
        display: flex;
        align-items: stretch;
        background: #fff;
        justify-content: space-between;
        .col {
          margin: 10px;
          background: #f4f5f7;
          display: flex;
          flex-direction: column;
          .title {
            padding: 15px 0 0 15px;
            height: 40px;
            font-size: 18px;
          }
        }
      }
      .card_title {
        font-size: 18px;
      }
      .card_body {
        height: calc(100% - 48px);
        background: #f4f5f7;
        margin: 12px 12px;
      }
    }
  }
}
:deep(.el-form--inline .el-form-item__label) {
  width: 100px;
}
</style>